<template>
  <div class="charge">
    <template>
      <el-table :data="vipList" style="width: 100%" border="">
        <el-table-column
          prop="imageUrl"
          label="产品图片"
          width="150"
          align="center"
        >
          <!-- 插槽 -->
          <template v-slot="scope">
            <el-avatar
              shape="square"
              :size="80"
              fit="scale-down"
              :src="scope.row.imageUrl"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="productName"
          label="产品名称"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="description"
          label="产品描述"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="price"
          label="价格（元）"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="inventory"
          label="库存"
          width="200"
          align="center"
        ></el-table-column>

        <el-table-column prop="opration" label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              icon="iconfont icon-vip3"
              @click="pre_order(row)"
            >
              充值
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
import * as api from "@/api/transaction";
export default {
  meta: {
    title: "vipCharge",
    name: "vip充值",
    icon: "iconfont icon-chongzhi",
  },
  data() {
    return {
      vipList: [],
    };
  },
  created() {
    //获取VIP订单
    this.getVipList();
  },
  methods: {
    //获取VIP订单
    getVipList() {
      api.getVipOrder().then((res) => {
        // console.log(res.data, 8888);
        this.vipList = res.data.data;
      });
    },
    //充值
    pre_order(row) {
      console.log(row);

      let { product_id, category_id } = row;
      //提示框
      this.$confirm(`是否确认购买${row.description}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
      })
        .then(() => {
          //跳转支付页面
          this.$router.push({
            path: "/preorder",
            query: { product_id, category_id },
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "已取消购买",
          });
        });
    },
  },
};
</script>
<style lang="less" scoped>
.el-button--primary {
  color: #fff;
  background-color: rgb(123, 221, 123) !important;
  border-color: rgb(123, 221, 123) !important;
}
.el-button--primary:hover {
  background-color: rgb(118, 206, 241) !important;
  border-color: rgb(118, 206, 241) !important;
}
</style>
